<template>
  <div style="display: flex">
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div style="width: 300px;display: flex;align-items: center;margin-left: 10px;">
            <svg-icon class="primary" :icon-class="$route.meta.icon"/>
            <span style="margin-left: 5px;" class="primary">{{ $route.meta.title }}</span>
          </div>
          <div class="report_header_left"></div>
          <div class="report_header_query">
            <querySupplier @querySupplier="querySupplier" :supplierName="query.supplierName" :supplierId="query.supplierId"></querySupplier>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px">
              <div class="report_header_query">
                <el-input prefix-icon="el-icon-search" placeholder="请输入产品名称" v-model="keyword" clearable></el-input>
              </div>
            </div>

            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" v-permission="['product.query']" @click="queryClick">查询
            </el-button>
            <el-button style="margin-left: 10px;margin-top: 5px;" size="small" type="primary" v-permission="['product.add']" @click="addClick">新增
            </el-button>

          </div>
        </div>
      </el-header>
      <div class="pd10">

        <el-table :data="companyData" border stripe :height="curHeight"
                  ref="table" style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column label="产品编码" align="center" prop="sn" width="80"></el-table-column>
          <el-table-column label="产品名称" prop="name"></el-table-column>
          <el-table-column label="供应商" prop="customerName"></el-table-column>
          <el-table-column label="油价" align="center" prop="price" width="70"></el-table-column>
          <el-table-column label="锁油期限" align="center" prop="limitDay" width="80"></el-table-column>
          <el-table-column label="最小订购量" align="center" prop="minimum" width="100"></el-table-column>
          <el-table-column label="所属公司" align="center" prop="companyName" width="150"></el-table-column>
          <el-table-column label="创建日期" align="center" prop="createDate" width="100"></el-table-column>
          <!-- <el-table-column label="状态" prop="status" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status == 0 ? 'warning' : 'success'">
                <span>{{ scope.row.status | watchStatus }}</span>
              </el-tag>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="审核说明" align="center" prop="address"></el-table-column> -->
          <!--          <el-table-column label="功能" fixed="right" width="200" align="center">-->
          <!--            <template>-->
          <!--              <el-button type="primary" size="mini" style="margin-left: 10px" @click="editProduct">编辑</el-button>-->
          <!--              <el-button type="primary" size="mini" style="margin-right: 10px" @click="delProduct">删除</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="功能" fixed="right" align="center" width="150">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" v-permission="['prodct.detail']" content="查看详情" placement="top-start">
                <el-button @click="detailClick(scope.row)" type="primary" size="mini"
                >详情
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="80">
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  v-permission="['product.edit']"
                  content="修改产品"
                  placement="top-start"
                >
                  <a @click="editClick(scope.row)">
                    <i style="color: #409EFF" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  v-permission="['product.del']"
                  content="删除产品"
                  placement="top-start"
                >
                  <a style="margin-left: 10px" @click="del(scope.row)">
                    <i style="color: #F56C6C" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadCompany" align="center"
        ></pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<style scoped>

</style>

<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import {list, del, update} from '@/api/product'
import {find} from '@/api/customer'
import {EventBus} from '@/api/eventBus'
import Pagination from '@/components/Pagination'
import loadMore from '@/utils/loadMore.js'
import utils from '@/utils/utils'
import QuerySupplier from "@/components/Query/querySupplier";

export default {
  name: 'product-list',
  directives: {permission, loadMore},
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      total: 0,
      payLoads: '',

      keyword: '',
      curHeight: null,
      query: {
        communityName: '',
        supplierId: '',
        supplierName:''
      },
      companyData: []
    }
  },
  components: {QuerySupplier, Pagination},
  created() {
    var _this = this
    _this.loadCompany()
    EventBus.$on("product-add", res => {
      this.companyData.splice(0, 0, res);
    });

    EventBus.$on("product-edit", res => {
      for (var i = 0; i < this.companyData.length; i++) {
        if (this.companyData[i].id == res.id) {
          this.$set(this.companyData, i, res)
        }
      }
    });
  },
  activated() {
    this.payLoads = new Date().getTime()
  },
  mounted() {
    this.comeIn()
    this.beforeMount()
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    }

  },
  methods: {
    beforeMount() {
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight
            this.curHeight = h - 266 //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight
            this.curHeight = h - 220 //减去页面上固定高度height
          }
        })()
      }
    },
    comeIn() {
      var h =
        document.documentElement.clientHeight || document.body.clientHeight
      this.curHeight = h - 220 //减去页面上固定高度height
    },
    formatDate2Day(val) {
      if (val) {
        let date = new Date(val)
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y + '-' + MM + '-' + d
      } else {
        return ''
      }
    },
    formatList(data) {
      if (data.length > 0) {
        data.map(item => {
          item.createDate = this.formatDate2Day(item.createDate)
        })
      }
      return data
    },
    loadCompany() {
      let _this = this
      console.log(2)
      let params = new URLSearchParams()

      params.append('keyword', _this.keyword)
      params.append('pageNum', _this.pageNum)
      params.append('pageSize', _this.pageSize)
      params.append('direction', 'asc')
      if (_this.query.supplierId != null) {
        params.append('customerId', _this.query.supplierId)
      }

      list(params).then(res => {
        let list = res.data.data
        _this.companyData = _this.formatList(list)
        _this.total = res.data.total
        console.log(res,'list')
      })

    },

    del(row) {
      console.log("data",row.id);
      var _this = this
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })

        .then(() => {
          del(row.id)
            .then(response => {
              _this.orderList.forEach(function(item, index) {
                if (item.id === row.id) {
                  _this.orderList.splice(index, 1);
                  this.loadCompany()
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true
              });
            })
            .catch(error => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    queryClick() {
      this.loadCompany()
    },
    addClick() {
      this.$router.push({
        path: '/product/add'
      });
    },
    editClick(row){
      console.log(row.id)
      this.$router.push({
        path: '/product/edit',
        query: { id: row.id }
      });
    },
    querySupplier(item) {
      console.log(item,'querySupplier')
      var _this = this
      _this.query.supplierId = item.id
      _this.query.supplierName = item.name
    },
    detailClick(row) {
      this.$router.push({
        path: '/product/detail',
        query: {id: row.id}
      });
    },
  }
}
</script>

<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}

/deep/ .el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}

.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
